<script lang="ts" setup>
import type { CascaderOption, InputInst } from 'naive-ui'
import { useUserStore } from '@/store/modules'
import type { userGetuserInfoReturnModel } from '@/api/user'
import { userModify } from '@/api/user'
import countryData from '@/utils/country-data'
const { userInfo, getUserInfo } = useUserStore()
const userForm = ref<userGetuserInfoReturnModel>(userInfo) // 用户表单数据

// 省市区
const cascaderValue = ref<string>(userInfo.county) // 选择器value
function handleCascaderUpdateValue(_value: string, _option: CascaderOption, pathValues: Array<CascaderOption | null>) { // 选择器回调
  userInfo.province = pathValues[0]!.value!.toString()
  userInfo.city = pathValues[1]!.value!.toString()
  userInfo.county = pathValues[2]!.value!.toString()
}
// 初始获得焦点
const userNameInput = ref<InputInst | null>(null)
onMounted(() => {
  userNameInput.value?.focus()
  console.log(countryData, 'countryData')
})

// 修改用户基础信息
async function modifyUserInfo() {
  const { code, msg } = await userModify({
    userName: userForm.value.userName,
    descText: userForm.value.descText,
    addressName: userForm.value.addressName,
    province: userForm.value.province,
    city: userForm.value.city,
    county: userForm.value.county,
    addressDetail: userForm.value.addressDetail,
  })
  if (code === 0) {
    window.$message?.success(msg)
    getUserInfo()
  }
}
</script>

<template>
  <n-form mt-20>
    <n-form-item label="店铺名称">
      <n-input ref="userNameInput" v-model:value="userForm.userName" placeholder="请输入店铺名称" clearable w-full />
    </n-form-item>
    <n-form-item label="店铺简介">
      <n-input v-model:value="userForm.descText" type="textarea" placeholder="请输入店铺简介" :autosize="{ minRows: 3 }" show-count clearable w-full />
    </n-form-item>
    <n-form-item label="店铺联系人">
      <n-input v-model:value="userForm.addressName" placeholder="请输入店铺联系人" w-full clearable />
    </n-form-item>
    <n-form-item label="店铺地址">
      <n-cascader
        v-model:value="cascaderValue"
        placeholder="请选择省/市/区县"
        expand-trigger="click"
        :options="countryData"
        check-strategy="child"
        clearable
        @update:value="handleCascaderUpdateValue"
      />
      <n-input v-model:value="userForm.addressDetail" type="textarea" placeholder="请输入详细街道门牌地址" :autosize="{ minRows: 2 }" clearable w-full mt-5 />
    </n-form-item>
  </n-form>
  <n-button type="primary" @click="modifyUserInfo">
    更 新
  </n-button>
</template>

<style lang="scss" scoped>
:deep(.n-form-item) {
  margin-bottom: 20px;
  .n-form-item-label {
    font-weight: bold;
    color: #909399;
  }
  .n-form-item-blank{
    flex-direction: column;
  }
}
</style>
